<?php
/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License (AFL 3.0)
 * that is bundled with this package in the file LICENSE_AFL.txt.
 * It is also available through the world-wide-web at this URL:
 * http://opensource.org/licenses/afl-3.0.php
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@magentocommerce.com so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade Magento to newer
 * versions in the future. If you wish to customize Magento for your
 * needs please refer to http://www.magentocommerce.com for more information.
 *
 * @category    design
 * @package     default_modern
 * @copyright   Copyright (c) 2009 Irubin Consulting Inc. DBA Varien (http://www.varien.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */

/**
 * Product view template
 *
 * @see Mage_Catalog_Block_Product_View
 * @see Mage_Review_Block_Product_View
 */
?>
<?php
    $_helper = $this->helper('catalog/output');
    $_product = $this->getProduct();
?>
   <div style="/*background: url('../images/background/featured_product_bg.gif') repeat-x scroll 0 0 #F4F4F4;*/
    border-radius: 10px 10px 10px 10px;
    float: right;
    min-height: 110px;
    width: 345px;">
       <div>
           
           <p style="color: #478BCC;font-size: 13px">Sale Stats Statistics</p>
           <hr style="background-color: #000000; margin-top: -8px;width: 348px; margin-bottom: -21px;margin-left: -7px"> </hr>
           <br></br>
           <div style="width: 300px">
               <div style="  background-color: #E0E0E0;float: left;width: 132px;padding-left: 20px"><span style="font-size: 15px;">120 SOLD</span></div>
               <div style="  background-color: #EEEEEE; float: right;width: 138px;padding-left: 10px"><span style="font-size: 15px;">100 REMAINING</span></div>
               <div class="clear"></div>
           </div>
           <br/>
            <div class="divStatistic">
          <span class="value">60% Female Customers</span>
          <span class="bar bar1" style="width:60%">60%</span>
       </div>
        <div class="divStatistic">
          <span class="value">20% Male Customers</span>
          <span class="bar bar1" style="width:20%">20%</span>
       </div>
       <div class="divStatistic">
          <span class="value">10% Unknown</span>
          <span class="bar bar1" style="width:10%">10%</span>
       </div>
   
       </div>
       <div style="margin-top: 20px">
           <p style="color: #478BCC;font-size: 13px">Quantity Selection</p>
           <hr style="background-color: #000000; margin-top: -8px;width: 348px;margin-left: -7px"> </hr> 
       </div>
       
        <div class="divStatistic">
          <span class="value">80% bought 1</span>
          <span class="bar" style="width:80%">80%</span>
       </div>
        <div class="divStatistic">
          <span class="value">14% bought 2</span>
          <span class="bar" style="width:14%">14%</span>
       </div>
       <div class="divStatistic">
          <span class="value">6% bought 3 or more</span>
          <span class="bar" style="width:6%">6%</span>
       </div>
       <style type="text/css">
           .divStatistic{
              font-size: 13px;
              width: 338px;
              position: relative;
              margin-top: 20px;
              padding: 2px;
           }
          .value
           {
               position: relative;
               z-index: 2;
           }
           .bar
           {
               height: 100%;
               left: 0;
               top: 0;
               overflow: hidden;
               position: absolute;
               background-color:#EEEEEE;
			   text-indent : -9999px;
           }
            .bar1
           {
               background-color:#E0E0E0 !important;
           }
       </style>
    </div>
 
   
   

